<!-- 财务统计 -->
<template>
	<view class="statistics-page">
		
		<!-- 统计header -->
		<view class="top-bj">
			<!-- 背景插图 -->
			<image class="bj-img" mode="widthFix" src="/static/technician/statistics-icon.png"></image>
			<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
				padding="20rpx" :size="90" color="rgba(255, 255, 255, 0.80)" activeColor="#fff" activeLineBg="#fff"
				textAlign="center" activeLineWidth="40%" activeDirection="center" activeLineHeight="6rpx" bgColor="none"
				:margin="10" @change="getChange"></sunui-navbar>
			<view class="flex-between p-align38 m-top40">
				<view class="flex-align-center user-msg">
					<image :src="headEarnings.head"></image>
					<view class="flex-columns user-name">
						<text>{{headEarnings.technicianName}}</text>
						<view>{{headEarnings.mobile}}</view>
					</view>
				</view>
				<view class="flex-align-center screen-cls">

					<picker mode="date" :fields="currentTimeFn(currentTime)" :value="date" :start="startDate"
						:end="endDate" @change="bindDateChange">
						<view class="flex-align-center color6" v-if='currentTime==1'>
							{{ yeartime }}
							<text>-</text>
							{{ monthtime }}
							<text>-</text>
							{{ daytime }}
						</view>
						<view class="flex-align-center color6" v-if='currentTime==2'>
							{{ yeartime }}
							<text>-</text>
							{{ monthtime }}

						</view>
						<view class="flex-align-center color6" v-if='currentTime==3'>
							{{ yeartime }}
						</view>
					</picker>
					<image class="dropDown" mode="heightFix" src="/static/Vector 45.png"></image>
				</view>
			</view>
			<view class="flex-between tx-padding">
				<view class="flex-columns">
					<text class="font24 color_FFFFFF">累计收益</text>
					<view class="top-price flex-align-center">
						￥
						<text>{{headEarnings.noWithdrawalAmount}}</text>
					</view>
				</view>
				<view class="flex-column tx-cls ">
					<view class="flex" @click="applyWithdrawal">申请提现</view>
					<text @click="viewDetails()">查看明细</text>
				</view>
			</view>
			<view class="flex-align-center">
				<block>
					<view class="flex-column segmentation-content divider-right">
						<view>{{ headEarnings.totalOrderAmount }}</view>
						<text>累计完成订单金额(元)</text>
					</view>
					<view class="flex-column segmentation-content divider-right">
						<view>{{ headEarnings.orderCount }}</view>
						<text>累计完成订单数量(个)</text>
					</view>
				</block>
			</view>
		</view>
		<!-- 统计card 数据 -->
		<view class="card-content">
			<view class="flex-around p-side">

				<view class="flex-column data-cls p-bottom40 bottom-border"
					:class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{ headEarnings.monthCount }}</view>
					<text>已完成订单(个)</text>
				</view>
				<view class="flex-column data-cls p-bottom40 bottom-border"
					:class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{ headEarnings.monthOrderAmount }}</view>
					<text>已完成订单金额</text>
				</view>
				<view class="flex-column data-cls p-bottom40 bottom-border"
					:class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{headEarnings.monthAmount }}</view>
					<text>本月收益(元)</text>
				</view>


			</view>
			<view class="flex-around p-side">

				<view class="flex-column data-cls p-bottom20" :class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{ headEarnings.noWithdrawalAmount }}</view>
					<text>未提现金额(元)</text>
				</view>
				<view class="flex-column data-cls p-bottom20" :class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{ headEarnings.freezeAmount }}</view>
					<text>提现中/冻结中(元)</text>
				</view>
				<view class="flex-column data-cls p-bottom20" :class="j == 1 ? 'align-border width38' : 'width31'">
					<view>{{ headEarnings.alreadyWithdrawalAmount }}</view>
					<text>已提现金额(元)</text>
				</view>

			</view>
			<view v-if="categoriesArr.length">
				<view class="revenue-statistics">收益统计</view>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</view>

			<sunui-navbar :items="orderTabList" lineHeight="70rpx" :isCenter="true" :currentIndex="orderCurrentIndex"
				padding="20rpx" fontSize="32rpx" activeFontSize="32rpx" :size="130" color="#999" activeColor="#333;"
				activeLineBg="#FFF" textAlign="center" activeLineWidth="40%" activeDirection="center"
				activeLineHeight="0rpx" bgColor="none" :margin="10" @change="getChange2"></sunui-navbar>

			<!-- 可与 “技师端的订单” 复用，写成组件 -->
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback">
				<view class="card-cls" v-for="(item,i) in getXcxEarningsList" :key="i">
					<view class="flex-between p-bottom30">
						<view class="flex-align-center order-num">
							<text style="width: 386rpx; " class="font-overflow">订单编号：{{item.orderNumber}}</text>
							<view>复制</view>
						</view>
						<text class="stauts-cls flex" v-if="item.status==0">待付款</text>
						<text class="stauts-cls flex" v-if="item.status==1">待接单</text>
						<text class="stauts-cls flex" v-if="item.status==2">已接单</text>
						<text class="stauts-cls flex" v-if="item.status==3">服务中</text>
						<text class="stauts-cls flex" v-if="item.status==4">已完成</text>
						<text class="stauts-cls flex" v-if="item.status==5">已取消</text>
					</view>
					<view class="flex-align-center">
						<image class="order-img" :src="item.rotationChart"></image>
						<view class="flex-columns">
							<view class="color333 font32">{{item.tradeName}}</view>
							<view class="appointment-time">预约时间：{{item.serviceStartTime}}</view>
							<view class="flex-align-center">
								<view class="color333 font32 bold">￥{{item.disbursements}}</view>
								<text class="segmentation">|</text>
								<view class="flex-align-center time-icon">
									<text class="iconfont icon-shijian"></text>
									<view>{{item.serviceTime}}分钟</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 分割线 -->
					<view class="dashed-line"></view>
					<view class="flex-align-center address-cls">
						<text class="iconfont icon-dingweiweizhi"></text>
						<view>{{item.address}}</view>
					</view>
					<view class="flex-align-center v-navigation">
						<text class="iconfont icon-lianxirenxinxi"></text>
						<view class="color75">{{item.consignee}} {{item.mobile}}</view>
						<view @click="callIphone(item.mobile)" class="call-phone">拨打</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {

			return {
				monet: [],
				categoriesArr: [],
				chartData: null,
				//选择的年份
				yeartime: '',
				//选择的月份
				monthtime: '',
				//选择的日份
				daytime: '',
				
				orderNum: [{
						num: 50,
						text: '本月完成订单(个)'
					},
					{
						num: 5000.0,
						text: '本月完成订单金额(元)'
					},
					{
						num: 500.0,
						text: '本月收益(元)'
					}
				],
				orderNum2: [{
						num: 20000,
						text: '累计提现金额(元)'
					},
					{
						num: 5000,
						text: '未提现金额(元)'
					},
					{
						num: 20000,
						text: '已提现金额(元)'
					}
				],
				list: [{
						num: 500.0,
						text: '累计完成订单金额(元)'
					},
					{
						num: 500,
						text: '累计完成订单数量(个)'
					}
				],
				// 财务tab
				tabList: [{
						name: '今天',
						id: 1
					},
					{
						name: '本月',
						id: 4
					},
					{
						name: '今年',
						id: '',
						isOpen: 1
					}
				],

				// 订单tab  <!-- （0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款） -->
				orderTabList: [{
						name: '全部',
						id: ''
					},
					{
						name: '待付款',
						id: 0
					},
					{
						name: '待接单',
						isOpen: 1
					},
					{
						name: '已接单',
						isOpen: 2
					},
					{
						name: '服务中',
						isOpen: 3
					},
					{
						name: '已完成',
						isOpen: 4
					},
					{
						name: '已取消/退款',
						isOpen: 5
					}
				],
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				currentIndex: 0, //自定义索引
				orderCurrentIndex: 0, //自定义索引
				headEarnings: null,
				// 获取小程序统计列表
				getXcxEarningsList: [],
				// 选择的年月日
				currentTime: 1
			};
		},
		onShow() {
			this.getXcxHeadEarningsFn()
			this.init()
			this.getXcxEarningsFn()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}
		},
		methods: {
			init() {
				const currentDate = this.getDate({
					format: true
				});
				if (this.currentTime == 1) {
					this.yeartime = currentDate.split('-')[0];
					this.monthtime = currentDate.split('-')[1];
					this.daytime = currentDate.split('-')[2]

				} else if (this.currentTime == 2) {
					this.yeartime = currentDate.split('-')[0];
					this.monthtime = currentDate.split('-')[1];

				} else {
					this.daytime = currentDate.split('-')[2]
				}
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];
				this.time = this.yeartime + '-' + this.monthtime;
				this.getXcxEarningsFn()
				this.mescroll.resetUpScroll();
			},

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getXcxHeadEarningsFn() {
				const res = await this.$http.get({
					url: this.$api.getXcxHeadEarnings,
					data: {
						id:  uni.getStorageSync('technicianId'),
					}
				});
				console.log(res)
				this.headEarnings = res.data
			},
			callIphone(iphone) {
				uni.makePhoneCall({
					phoneNumber: iphone //仅为示例
				});
			},
			async getXcxEarningsFn() {

				this.categoriesArr = []

				const res = await this.$http.get({
					url: this.$api.getXcxEarnings,
					data: {
						userId:  uni.getStorageSync('userId'),
						sign: this.currentTime,
						createdDate: this.time,
					}
				});
				console.log(res)
				res.data.forEach((item) => {
					this.categoriesArr.push(item.createAt)
				})

				this.monet = res.data.map((item) => {
					return item.monet
				})

				let ress = {
					categories: this.categoriesArr,
					series: [{
							name: "收益统计",
							data: this.monet
						},

					]
				};
				this.chartData = JSON.parse(JSON.stringify(ress));

			},

			getChange(index) {
				this.currentIndex = index;
				this.currentTime = index + 1
				// 获取当前的时间
				const currentDate = this.getDate({
					format: true
				})
				

				this.mescroll.resetUpScroll();
				this.getXcxEarningsFn()
                 this.init()
			},
			getChange2(index) {
				this.orderCurrentIndex = index;
				console.log(index)


				uni.showLoading({
					title: '加载中'
				})
				this.loading = false
				this.mescroll.resetUpScroll();
			},
			// 查看明细
			viewDetails(){
				this.$sun.navTo('/pages/withdrawal/withdrawal-records/withdrawal-records')
			},
			// 申请提现
			applyWithdrawal() {
				this.$sun.navGo('/pages/withdrawal/apply-withdrawal/apply-withdrawal')
			},
			async upCallback(scroll) {
				if (this.currentTime == 1) {
					this.time = this.yeartime + '-' + this.monthtime + '-' + this.daytime;
				} else if (this.currentTime == 2) {
					this.time = this.yeartime + '-' + this.monthtime;
				} else {
					this.time = this.yeartime;
				}
				const result = await this.$http.get({
					url: this.$api.getXcxEarningsList,
					data: {
						id:  uni.getStorageSync('technicianId'),
						page: scroll.num,
						limit: 10,
						sign: this.currentTime,
						createdDate: this.time,
						status: this.orderCurrentIndex == 0 ? '' : this.orderCurrentIndex - 1
					}
				});
				console.log(result)
				if (result.code == 200) {
					this.mescroll.endByPage(result.data.list.length, result.total);
					if (scroll.num == 1) this.getXcxEarningsList = [];
					this.getXcxEarningsList = this.getXcxEarningsList.concat(result.data.list);
					console.log(this.getXcxEarningsList)
				}
			},

		}
	};
</script>

<style lang="less">
	.screen-cls {
		view {
			color: #fff;
			margin-right: 6rpx;
		}

		.dropDown {
			width: 30rpx !important;
			height: 20rpx !important;
		}
	}

	.statistics-page {
		.p-align38 {
			margin-top: 20rpx;
			padding: 0 38rpx;
		}

		.tx-padding {
			padding: 44rpx 38rpx 46rpx;
		}

		// 统计header
		.top-bj {
			padding: 20rpx 0 40rpx;
			position: relative;
			background: linear-gradient(256deg, #4370ff 12.04%, #7c9cff 89.24%);
			width: 100%;
			height: auto;

			.bj-img {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 360rpx;
			}

			.user-msg {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				.user-name {
					text {
						color: #fff;
						font-size: 32rpx;
					}

					view {
						color: #fff;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}

			.user-time {
				color: #fff;
			}

			.top-price {
				margin-top: 18rpx;
				color: #fff;

				text {
					font-size: 40rpx;
					font-weight: 700;
				}
			}

			.tx-cls {
				z-index: 99;

				view {
					color: #19c866;
					width: 148rpx;
					height: 54rpx;
					border-radius: 80rpx;
					background: #fff;
					margin-bottom: 20rpx;
				}

				text {
					color: #fff;
					font-size: 24rpx;
					text-decoration-line: underline;
				}
			}

			.segmentation-content {
				width: calc(100% / 2 - 1px);

				view {
					color: #fff;
					font-size: 36rpx;
					font-weight: 700;
					margin-bottom: 18rpx;
				}

				text {
					color: #fff;
					font-size: 24rspx;
				}
			}

			.divider-right {
				border-right: 2rpx solid rgba(255, 255, 255, 0.4);
			}
		}

		// 统计card 数据
		.card-content {
			position: relative;
			margin-top: -16rpx;
			padding: 30rpx 0;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.p-side {
				margin: 0 20rpx 20rpx;

				// .align-border {
				// 	border-right: 2rpx solid #f0f0f0;
				// 	border-left: 2rpx solid #f0f0f0;
				// }
				.bottom-border {
					border-bottom: 2rpx solid #f0f0f0;
				}

				.data-cls {
					padding-top: 10rpx;

					view {
						margin-bottom: 14rpx;
						font-size: 36rpx;
					}

					text {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.revenue-statistics {
				color: #1890ff;
				font-size: 32rpx;
				padding: 50rpx 26rpx;
			}

			// 订单卡片
			.card-cls {
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
				margin: 26rpx 22rpx;
				padding: 30rpx 20rpx;
				border-radius: 10rpx;
				background: #fff;

				.order-num {
					text {
						color: #757575;
					}

					view {
						display: inline-block;
						color: #999;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						border: 2rpx solid #bfbfbf;
						margin: 0 22rpx;
					}
				}

				.stauts-cls {
					color: #fff;
					border-radius: 80rpx 0rpx 0rpx 80rpx;
					background: linear-gradient(91deg, #59AFFF 0.81%, #1890FF 98.86%);
					width: 120rpx;
					height: 48rpx;
					margin-right: -20rpx;
				}

				.order-img {
					width: 136rpx;
					height: 136rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.appointment-time {
					color: #757575;
					margin: 14rpx 0;
				}

				// 分割线
				.segmentation {
					color: #d0d0d0;
					margin: 0 18rpx;
				}

				.time-icon {
					color: #1890FF;

					text {
						font-size: 28rpx;
					}

					view {
						margin-left: 8rpx;
					}
				}

				// 虚线分割
				.dashed-line {
					margin: 28rpx 0;
					border-bottom: 2rpx dashed #e1e1e1;
				}

				.address-cls {
					text {
						font-size: 32rpx;
						color: #a1a1a1;
					}

					view {
						color: #757575;
						margin: 0 10rpx;
					}
				}

				.v-navigation {
					margin-top: 24rpx;

					text {
						font-size: 32rpx;
						color: #a1a1a1;
						padding-right: 10rpx;
					}

					.call-phone {
						color: #0085ff;
						text-decoration-line: underline;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
</style>